<template>
    <div>
        <van-nav-bar left-text="返回" left-arrow @click-left="onClickLeft"></van-nav-bar>
        <div class="previewer-wrapper">
            <div class="base-info-container">
                <div class="personal-info">
                    <div class="personal-self-info">
                        <div class="personal-self-base-info">
                            <div class="personal-avatar">
                                <img :src="avatar" alt="avatar" class="personal-avatar-img" />
                            </div>
                            <div class="personal-desc">
                                <div class="personal-name ET2 EC12">{{nickname}}</div>
                            </div>
                            <!-- <div class="personal-message">
                                <img src="~@/images/msg_icon.svg" alt="message icon" />
                            </div> -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <van-tabs v-model="active" @click="activeClick">
            <van-tab title="学生记录">
               <van-pull-refresh v-model="refreshing" @refresh="onRefresh()">
            <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad()" :immediate-check="false">
            <van-card :title="item.title" :desc="item.description" :thumb="item.cover" v-for="(item, index) in list" :key="index" @click="toView(item.id)">
                <template #bottom>
                <div class="size">最后一次学习时间</div>
                <div class="size">{{item.update_time}}</div>
                </template>
           </van-card>
         </van-list>
        </van-pull-refresh>
            </van-tab>
            <van-tab title="学习统计">
                <div class="title"> <van-icon name="clock-o" />累计数据</div>
                <div class="title nr" >
                    <ul class="btn">
                        <li>累计学习课程</li>
                        <li><span style="font-size:20px;color: black; margin-right: 5px;">{{total}}</span>课</li>
                    </ul>
                </div>
            </van-tab>
        </van-tabs>
    </div>
</template>
<script>
export default {
    data() {
        return {
            active: 0,
            number:1,
            avatar:"",
            nickname:"",
            loading: true,
            finished: false,
            refreshing: false,
            total: '',
            list:[],
            page:1,
            courselist:''
        }
    },
    methods: {
        onClickLeft() {
            this.$router.back()
        },
        async getData(){
             let res=await this.$frontaxios.get(this.$front.getUserInfo);
             if(res.code==1){
              this.avatar=res.data.avatar;
              this.nickname=res.data.nickname;
            }
        },
       async getStudyData(){
              let query = {
                page: 1,
                limit: 10,
                keyword: ''
            };
             query.page = this.page;
             let res=await this.$frontaxios.post(this.$front.getStudyRecord,query);
             if(res.code==1){
                  this.loading= true;;
                  this.courselist=res.data.list;
                  this.total= res.data.total;
             }else{
              console.log('没有获取到学习记录')
          }
        },async onLoad(){
            if (this.refreshing) {
                this.list = [];
                this.refreshing = false;
            }
            await this.getStudyData();
            this.list.push(...this.courselist);
            this.page++;
            this.loading = false; //不加载了，滚动底会变为true
            if (this.list.length >= this.total) {
                this.finished = true; //数据全部加载完设为true
            }
        },onRefresh(){
            // 清空列表数据
            this.finished = false;
            // 重新加载数据
            // 将 loadingall 设置为 true，表示处于加载状态
            this.loading = true;
            this.page= 1;
          
            this.onLoad();
            this.$toast.success('刷新成功');
        },toView(id){
            this.$router.push({name:"product",query:{id}});
        },activeClick(type){
            if(type==0){
                this.page=1;
                this.loading = true;
                this.finished = false;
                this.list=[]
                this.onLoad();
            }
        }
    },
    async created(){
       this.getData();
       this.onLoad();
    }
}
</script>
<style  scoped>
.previewer-wrapper {
    cursor: pointer;
    position: relative;
}

.base-info-container {
    background: #f0f1f3;
    margin-bottom: 12px;
}

/* .personal-self-info {
    background: url(~@/images/bg.png) center center;
} */

.personal-self-base-info {
    display: flex;
    padding: 32px 18px;
}

.personal-self-base-info .personal-avatar {
    width: 60px;
    height: 60px;
    overflow: hidden;
    border-radius: 60px;
    background: #ddeeff;
}

.personal-self-base-info .personal-avatar .personal-avatar-img {
    width: 100%;
    height: 100%;
}

.personal-self-base-info .personal-desc {
    margin-left: 16px;
}

.ET2 {
    font-size: 18px;
}

.EC12 {
    color: black;
}

.personal-self-base-info .personal-message {
    flex-grow: 1;
    text-align: right;
}

.title{
    margin: 20px ;
}
.van-icon-clock-o{
    color: dodgerblue;
    font-weight: 700;
}
.btn{
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    height: 60px;
    padding: 0 10px;
    color: rgb(143, 142, 142);
    font-size: 10px;
}
.nr{
    border-radius: 5px;
    background-color: #EEE;
    width: 150px;
    height: 60px;
}
</style>
